<!DOCTYPE html>
<html>
   <head>
   	  <meta charset="utf-8"/>
   	  <meta name="renderer" content="webkit" />
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>车辆管理系统</title>
  	  <link href="../../static/pubilc/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  	  <link href="../../static/css/style.css" rel="stylesheet">
	</head>
	<body>
	<!--头部-->	
	<!--头部-->	
	<div class="header">
		<div class="container">
			<a href="index.html"><h3 class="fl">IC卡信息管理</h3></a>
			<p class="fr">欢迎你，<span>My-Left</span>&ensp;&ensp;&ensp;<a href="#">退出</a></p>
		</div>
	</div>		
	<div class="head"></div>
	<!--内容-->
	
	
	<div class="IC-card">
		<div class="container">
			<!--查看车辆信息-->
			<div class="IC-content" >
				<h2>车辆信息状态</h2>
				<div id="state">
					<div class="state-item"> <strong>车身颜色</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>车辆等级</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>车辆牌号</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>车辆类型</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>北斗安装</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>尾气排放标准</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>汽油类别</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>运营性质</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>车牌颜色</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>行驶仪安装</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>技术等级</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						<input type="text" class="form-control di" value="请输入添加元素">
					</div>
					<div class="state-item"><strong>车辆类别</strong>
						<ol>
							<li><span></span><p class="p">白色</p></li>
							<li><span></span><p class="p">白色</p></li>
						</ol>
						
						<input type="text" class="form-control di" value="请输入添加元素">
					
				
					</div>
				</div>
				<!--查看车辆信息结束-->
			</div>
			<script src="../../static/pubilc/bootstrap/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../static/pubilc/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
			    $(function () {
			        $("#state").delegate('ol li', {
			            mouseenter: function () {
			                $(this).find('span').css('display', 'block');
			            },
			            mouseleave: function () {
			                $(this).find('span').css('display', 'none');
			            },
			            click: function () {
			               $(this).parents('#state').find('p')
			               		.attr('contentEditable', false)
			                    .css({
			                        'border': '1px solid #ccc',
			                        'box-shadow': 'initial'
			                    });
			               $(this).find('p')
			                        .attr('contentEditable', true)
			                        .css({
			                            'border': '1px solid #428bca',
			                            'box-shadow': '0 0 4px #428bca'
			                        });
			
			                $(this).parents('body').data({
			                    'obj': $(this).find('p'),
			                    'oldValue': $(this).find('p').text()
			                });
			                return false;
			            }
			        }).delegate('input.di', {
			            focus: function () {
			                $(this).val('');
			            },
			            blur: function () {
			                $(this).val('请输入添加元素');
			            },
			            change: function () {//添加
			                if ($(this).val() == '') return;
			                var confName = $(this).attr('name');
			                var value = $(this).val();
			                var str = '<li><span name="{{value}}"></span><p class="p">' + $(this).val() + '</p></li> ';
			                $(this).siblings('ol').append($(str));
			            }
			        }).delegate('ol span', {//删除
			            click: function () {
			                var value = $(this).attr('name');
			                var confName = $(this).parents('ol').attr('name');
			                $(this).parent().remove();
							return false;
			            }
			        });
			
			
			        $(document).click(function () {//修改
			            var value = $(this).find('body').data('obj').text();
			            var confName = $(this).find('body').data('obj').parents('ol').attr("name");
			            var oldValue = $(this).find('body').data('oldValue');
			            $(this).find('body').data('obj')
			                    .attr('contentEditable', false)
			                    .css({
			                        'border': '1px solid #ccc',
			                        'box-shadow': 'initial'
			                    });
			            if (value == '') $(this).find('body').data('obj').text(oldValue);
			            if (value == '' || value == oldValue) return;
			
			            $(this).find('body').removeData('obj oldValue');
			        }).keydown(function(event){ 
			          if (event.ctrlKey || event.keyCode === 13){ 
			            $(this).click()
			            return false;
			          } 
			        });
			    });
			</script>
		</div>	
	</div>
	<!--尾部-->
	<div class="footer">
		<p>加油卡管理，替换车辆，高峰期车辆管理，办理车辆税</p>
		<p>分析，开票控制，加油卡管理，替换车辆，高峰期车辆管理，办理车辆税</p>
	</div>	
	</body>
</html>